<template>
  <div>
    <div class="btn_box" style="margin: 20px 0">
      <el-button type="primary" @click="handleAdd">创建角色</el-button>
      <el-button   @click="roleVisible=true" :disabled="!currentRow ? true:false ">设置角色权限</el-button>
      <!-- roleVisible=true" :disabled="!currentRow ? true:false -->
    </div>
    <el-table
      :data="roleList"
      height="350"
      border
      style="width: 100%"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column property="name" label="角色姓名"> </el-table-column>
      <el-table-column property="create_time" label="创建时间" :formatter="reseDate">
      </el-table-column>
      <el-table-column property="auth_time" label="授权时间" :formatter="reseDate"> </el-table-column>
      <el-table-column property="auth_name" label="授权账户"> </el-table-column>
    </el-table>

    <el-dialog title="创建角色" :visible.sync="dialogFormVisible" width="500px">
      <el-form
        :model="role"
        ref="roleForm"
        label-width="100px"
        label-position="right"
        style="width: 400px"
        :rules="ruleRules"
      >
        <el-form-item label="角色名称" prop="name" >
          <el-input v-model="role.name" placeholder='请输入角色名称' ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addData('roleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- //设置角色权限 -->
    <el-dialog title="设置角色权限" :visible.sync="roleVisible" width="500px">
      <Auth :role="currentRow" ref="auth"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatarole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import roleApi from "@/api/role.js";
import memoryUtils from "@/utils/memoryUtils";
import Auth from "./Auth.vue";
import { formateDate } from "@/utils/dateUtils.js";
export default {
  data() {
    return {
      currentRow: null,
      roleList: [],
      dialogFormVisible: false,
      roleVisible:false,
      role: {
        name: "",
        menus: [],
      },
      ruleRules: {
         name:[{required:true,message:'请输入角色名称',trigger:'blur'}]
      },
    };
  },

  components: { Auth, Auth },
  mounted() {
    this.fetchData();
  },
  methods: {
    reseDate(row,column,cellValue,index){
      return formateDate(cellValue)
    },
    addData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          roleApi.add(this.role.name).then(res=>{
            const resp = res.data
            if(resp.status == 0){
              this.$message({
                type:'success',
                message:'添加角色成功咯！'
              })
              this.dialogFormVisible = false
              this.fetchData()
            }
          })
        } else {
          return false;
        }
      });
    },
    updatarole(){
      const newRole = this.$refs['auth'].getMenus()
      this.currentRow.menus = newRole.menus
      this.currentRow.name = newRole.name
      this.currentRow.auth_name=memoryUtils.user.username

      roleApi.update(this.currentRow).then(res=>{
        const resp = res.data
        if(resp.status ==0){
          this.$message({
                type:'success',
                message:'更改角色成功咯！'
              })
              this.roleVisible = false;
              this.fetchData()
        }
      })
    },

    handleAdd() {
      this.dialogFormVisible = true
      this.$nextTick(()=>{
         this.$refs['roleForm'].resetFields()
      })
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log(this.currentRow);
    },
    fetchData() {
      roleApi.getRoleList().then((response) => {
        console.log(response);
        const resp = response.data;
        if (resp.status == 0) {
          this.roleList = resp.data;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>